<template>
    <div>
        <TableSearch :search="state.tableData.search" @search="onSearch" @addRow="onTableEditRow" />
        <Table ref="tableRef" v-bind="state.tableData" class="table-demo" @delRow="onTableDelRow" @editRow="onTableEditRow"
            @pageChange="onTablePageChange" @sortHeader="onSortHeader" />
    </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, reactive, ref, onMounted, provide } from 'vue';
import { ElMessage } from 'element-plus';
import { useAccessInoutDeleteApi, useAccessInoutPageApi } from '/@/api/access/inout';
import moment from 'moment';

const dialogRef = ref<RefType>();
// 引入组件
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));

// 定义变量内容
const tableRef = ref<RefType>();
const state = reactive<TableDemoState>({
    tableData: {
        // 列表数据（必传）
        data: [],
        // 表头内容（必传，注意格式）
        header: [
            { key: 'deviceName', colWidth: '', title: '设备名称', type: 'text', isCheck: true, sortable: true },
            { key: 'lockRule', colWidth: '', title: '互锁规则', type: 'text', isCheck: true, sortable: true },
            { key: 'remark', colWidth: '', title: '备注', type: 'text', isCheck: true, sortable: true },
        ],
        // 配置项（必传）
        config: {
            total: 0, // 列表总数
            loading: true, // loading 加载
            isBorder: true, // 是否显示表格边框
            isSerialNo: false, // 是否显示表格序号
            isSelection: false, // 是否显示表格多选
            isOperate: false, // 是否显示表格操作栏
        },
        // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
        search: [
            { label: '门名称', prop: 'deviceName', placeholder: '请输入门名称', required: false, type: 'input', defaultValue: '' },
        ],
        // 搜索参数（不用传，用于分页、搜索时传给后台的值，`getTableData` 中使用）
        param: {
            pageNum: 1,
            pageSize: 10,
        },
        // 打印标题
        printName: '打印示例',
    },
});
// 初始化列表数据
const getTableData = () => {
    state.tableData.config.loading = true;
    // useAccessInoutPageApi(state.tableData.param).then(({ content }) => {
    //     state.tableData.data = content.list || []
    //     state.tableData.param.pageSize = content.pageSize
    //     state.tableData.param.pageNum = content.pageNum
    //     state.tableData.config.total = content.total
    // })
    state.tableData.data = [
        {
            deviceName: '大门进',
            lockRule: '大门互锁',
            remark: '无',
        },
        {
            deviceName: '食品区',
            lockRule: '食品区互锁',
            remark: '无',
        }, {
            deviceName: '制作区',
            lockRule: '制作区互锁',
            remark: '无',
        }
    ]
        state.tableData.param.pageSize = 10
        state.tableData.param.pageNum = 1
        state.tableData.config.total = 3
    // 数据总数（模拟，真实从接口取）
    state.tableData.config.loading = false;
};


// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
    state.tableData.param = Object.assign({}, state.tableData.param, { ...data });
    // tableRef.value.pageReset();
    getTableData()
};
// 删除当前项回调
const onTableDelRow = (row: EmptyObjectType) => {
    useAccessInoutDeleteApi(row.code).then(() => {
        ElMessage.success(`删除${row.name}成功！`);
        getTableData();
    })

};
// 编辑当前项回调
const onTableEditRow = (row: EmptyObjectType) => {
    if (row) {
        dialogRef.value.openDialog(row.code);
    } else {
        dialogRef.value.openDialog();
    }
};
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
    state.tableData.param.pageNum = page.pageNum;
    state.tableData.param.pageSize = page.pageSize;
    getTableData();
};
// 拖动显示列排序回调
const onSortHeader = (data: TableHeaderType[]) => {
    state.tableData.header = data;
};
// 页面加载时
onMounted(() => {
    getTableData();
});
</script>

<style scoped lang="scss">
.table-demo-container {
    .table-demo-padding {
        padding: 15px;

        .table-demo {
            flex: 1;
            overflow: hidden;
        }
    }
}

.menu-left {
    height: 650px;
    margin-right: 15px;
    overflow-y: auto;
    padding: 0 5px 30px 0;
    min-width: 300px;
}
</style>
